<template>
  <el-card class="box-card">
    <div class="header">
      <el-button type="success" size="medium" @click="showCreateDialog" icon="el-icon-plus">新增部门</el-button>
      <!-- <el-button type="danger" plain size="medium" icon="el-icon-s-custom">组织授权</el-button> -->
    </div>
    <div class="body">
      <el-table
        :data="deptList"
        style="width: 100%;margin-bottom: 20px;"
        row-key="deptId"
        border
        :tree-props="{children: '“children”', hasChildren: 'hasChildren'}"
        lazy
        :load="loadMenu"
        ref="table"
      >
        <!-- <el-table-column type="selection" width="55"></el-table-column> -->
        <el-table-column prop="deptId" label="部门ID" min-width="80" align="center"></el-table-column>

        <el-table-column prop="deptName" label="部门名称" min-width="180" align="center"></el-table-column>
        <el-table-column prop="deptCode" label="部门编码" width="180" align="center"></el-table-column>
        <el-table-column prop="parentName" label="上级部门" min-width="180" align="center">
          <template slot-scope="{row}">
            <el-tag v-if="row.parentName==='顶级部门'" type="default">{{ row.parentName}}</el-tag>
            <el-tag v-else-if="row.parentID===deptList.erjidan" type="success">{{ row.parentName}}</el-tag>
            <el-tag v-else type="info">{{ row.parentName}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          align="center"
          width="310px"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="{row}">
            <el-button
              type="success"
              icon="el-icon-view"
              size="mini"
              @click="showViewDialog(row.deptId)"
              plain
            >查看</el-button>
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="showUpdateDialog(row.deptId)"
            >编辑</el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="deleteHandle(row.deptId,row.parentId)"
              plain
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      :title="titleMap[dialogStatus]"
      :lock-scroll="true"
      :visible.sync="dialogFormVisible"
       :before-close="handleClose"
    >
      <!-- 新增部门对话框 -->

      <el-dialog width="30%" title="选择上级部门" :visible.sync="innerVisible" append-to-body>
        <!-- <el-tree
          lazy
          :data="treedata"
          @node-click="changeClick"
          node-key="deptId"
          ref="tree"
          :props="deptTreeProps"
          highlight-current
        ></el-tree>-->
        <el-tree :data="treedata" :props="deptTreeProps" @node-click="changeClick"></el-tree>
      </el-dialog>
      <div class="dialogBody">
        <el-scrollbar wrap-class="scrollbar-wrapper">
          <el-form
            ref="form"
            :model="form"
            label-width="80px"
            :disabled="!(dialogStatus ==='update' || dialogStatus ==='create')"
          >
            <el-row>
              <el-col :xs="24" :md="24">
                <el-form-item
                  label="部门名称"
                  prop="deptName"
                  :rules="[
                           { required: true, message: '部门名称不能为空'}]"
                >
                  <el-input v-model="form.deptName" placeholder="请输入部门名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :md="24">
                <el-form-item label="上级部门">
                  <el-input
                    type="text"
                    v-model="form.parentName"
                    :readonly="true"
                    placeholder="请输入上级部门"
                  >
                    <el-button slot="append" @click="innerVisible = true">选择</el-button>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :md="24">
                <el-form-item
                  label="部门编号"
                  prop="deptCode"
                  :rules="[
                           { required: true, message: '部门编号不能为空'}
                         ]"
                >
                  <el-input v-model.number="form.deptCode" placeholder="请输入部门编号"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :md="24">
                <el-form-item label="部门排序">
                  <el-input type="number" v-model="form.sortId" placeholder="部门排序"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :md="24">
                <el-form-item label="部门说明">
                  <el-input v-model="form.remark" placeholder="附加说明"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-scrollbar>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button
          type="primary"
          v-if="dialogStatus ==='update' || dialogStatus ==='create' "
          @click="saveHandle"
        >保存</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>
<script>
// 引用api接口
import { list, tree, findById, save, deleteById, updateById } from "@/api/dept";
export default {
  name: "Dept",
  inject: ["reload"],
  data() {
    return {
      treedata: [],
      dialogFormVisible: false,
      innerVisible: false,
      form: {},
      titleMap: {
        update: "编辑部门",
        create: "新建部门",
        view: "查看部门",
      },
      listQuery: {
        parentId: 0,
      },
      dialogStatus: "",
      deptList: [],
      deptTreeProps: {
        children: "children",
        label: "deptName",
      },
    };
  },
  // 页面加载函数
  created() {
    this.getList();
    this.gettreelist();
  },
  methods: {
    gettreelist() {
      let th = this;
      tree().then((response) => {
        th.treedata = response.data;
      });
    },
    // 树表格加载函数
    loadMenu(tree, treeNode, resolve) {
      list({ parentId: tree.deptId }).then((response) => {
        resolve(response.data);
      });
    },
    getList() {
      this.listLoading = true;
      list(this.listQuery).then((response) => {
        this.deptList = response.data;
        setTimeout(() => {
          this.listLoading = false;
        }, 1.5 * 1000);
      });
    },

    showCreateDialog() {
      this.gettreelist();
      this.resetForm();
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
      this.form = {};
    },
    showViewDialog(id) {
      this.resetForm();
      this.dialogStatus = "view";
      findById(id).then((response) => {
        this.form = response.data;
        setTimeout(() => {
          this.listLoading = false;
        }, 1.5 * 1000);
      });
      this.dialogFormVisible = true;
    },
    showUpdateDialog(id) {
      this.resetForm();
      this.dialogStatus = "update";
      findById(id).then((response) => {
        this.form = response.data;
        setTimeout(() => {
          this.listLoading = false;
        }, 1.5 * 1000);
      });
      this.dialogFormVisible = true;
    },
    // 删除
    deleteHandle(id, parentId) {
      let that = this;
      this.$confirm("是否删除这条数据？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        //刷新树表格节点的方法
        deleteById(id).then(() => {
          this.reload()
        });
      });
    },
    saveHandle() {
      let that = this;
      // 获取表单内容是否有未通过验证的
      that.$refs.form.validate((valid) => {
        if (valid) {
          this.downloadLoading = true;
          if (that.dialogStatus === "create") {
            save(this.form).then(() => {
              this.listLoading = false;
              that.dialogFormVisible = false;
              this.reload();
            });
          } else {
            updateById(this.form).then(() => {
              this.listLoading = false;
              that.dialogFormVisible = false;
              this.reload();
            });
          }
        } else {
          return false;
        }
      });
    },
    resetForm() {
      if (this.$refs.form !== undefined) {
        // 重置表单
        this.$refs.form.resetFields();
      }
    },
    // 选择上级菜单
    changeClick(obj, node, data) {
      this.form.parentId = obj.deptId;
      this.form.parentName = obj.deptName;
      this.innerVisible = false;
    },
     handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>
<style lang="scss" scoped>
.box-card {
  height: 100%;
  margin: 10px 8px;
  padding: 0;
}
.header {
  margin-bottom: 10px;
}
.dialogBody {
  height: 400px;
  overflow: hidden;
}
.scrollbar-wrapper {
  overflow-x: hidden !important;
}

.el-scrollbar__bar.is-vertical {
  right: 0px;
}

.el-scrollbar {
  height: 100%;
}
</style>
